【Day - 19】Spring Boot 集成 Thymeleaf構建動態Web應用 (上) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 19

Mobile Development

Spring Boot+Android 30天實戰開發系列第 19 篇

【Day - 19】Spring Boot 集成 Thymeleaf構建動態Web應用 (上)

15th鐵人賽 spring boot thymeleaf

ian_liu

團隊nutc_imac_FewFew

2023-09-29 18:14:22

808 瀏覽

分享至

1. 引言

在現代Web開發中，構建動態Web應用已經成為常態。這些應用能夠根據使用者的請求生成動態內容，從而提供更豐富的使用者體驗。本文將向您介紹如何使用Spring Boot和Thymeleaf這一強大的組合來構建動態Web應用。

Thymeleaf是一款流行的模板引擎，專為Web開發而設計。它與Spring Boot完美集成，提供了強大的模板功能，允許您在HTML中嵌入動態內容。Thymeleaf還支持國際化和本地化，使多語言支持變得容易。

本文內容概述

在本文中，我們將深入探討如何使用Spring Boot和Thymeleaf來構建動態Web應用。以下是我們將要涵蓋的主要內容：

Thymeleaf基礎和控制器：我們將從Thymeleaf的基本概念開始，創建一個簡單的Spring Boot控制器類，用於處理HTTP請求，並定義視圖模板，將動態數據傳遞給Thymeleaf渲染。
基本的模板語法：我們將深入了解Thymeleaf的基本語法，包括表達式、屬性綁定以及如何使用條件語句和循環。
表單處理：我們將創建一個包含表單的頁面，演示如何處理表單提交，包括在控制器中處理表單數據並返回相應的結果頁面。
靜態資源管理：解釋如何管理靜態資源，如CSS、JavaScript和圖像，以及如何在模板中引用和加載這些靜態資源。
國際化和本地化：我們將介紹如何實現多語言支持，以適應不同的地區和語言，並演示如何使用Thymeleaf的國際化功能。
常見問題和調試技巧：我們將提供一些常見問題的解決方案，如模板不渲染、數據綁定問題等，並分享一些調試技巧，幫助開發者診斷和解決問題。

2. Thymeleaf基础和控制器

Thymeleaf是一個強大而靈活的模板引擎，專為Web和獨立環境開發。它的語法清晰且易於學習，使您能夠在HTML頁面中嵌入動態內容，同時保持良好的可讀性。

2.1 Thymeleaf的基本概念

首先，讓我們簡要介紹Thymeleaf的基本概念：

模板：模板是包含了HTML和Thymeleaf標記的文檔。它們通常用於定義Web頁面的結構和佈局。
表達式：Thymeleaf使用表達式來引用和操作模型中的數據。表達式由${}包圍，例如${user.name}表示訪問模型中user物件的name屬性。
屬性綁定：您可以通過Thymeleaf屬性綁定來設置HTML元素的屬性。這使得動態地更改元素的屬性成為可能，例如根據條件添加class或style屬性。
條件渲染：Thymeleaf支持條件渲染，這意味著您可以根據條件來渲染或隱藏HTML元素。
迭代：您可以使用Thymeleaf迭代來循環遍歷集合或陣列，並動態生成HTML元素。

2.2 創建一個簡單的Thymeleaf模板

首先，讓我們創建一個簡單的Thymeleaf模板，
讓我們通過一個簡單的示例來創建一個Thymeleaf模板。首先，創建一個名為welcome.html的HTML文件，然後將其保存在src/main/resources/templates目錄下（Spring Boot默認的Thymeleaf模板目錄）。

創建一個HTML文件welcome.html：

<!DOCTYPE html>
<html lang="zh-Hant-TW" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Welcome Page</title>
</head>
<body>
    <h1>Welcome, <span th:text="${user.name}">User</span>!</h1>
    <p th:if="${user.isAdmin}">You are an admin.</p>
</body>
</html>

我們定義了一個簡單的HTML頁面，其中包含一個標題和一個段落。我們使用Thymeleaf表達式${user.name}將使用者的姓名動態插入到頁面中，如果user.isAdmin為真，我們還會顯示一條消息。

在Spring Boot應用中，創建一個控制器方法，用於處理HTTP請求並渲染welcome.html模板。在控制器中，您可以設置username變量的值，以便在模板中渲染。
```
@Controller
public class WelcomeController {

    @GetMapping("/welcome")
    public String welcome(Model model) {
        // 創建一個名為"user"的模型屬性，並設置其值
        model.addAttribute("user", new User("Ian Liu", true));
        return "welcome"; // 回傳Thymeleaf模板的名稱
    }
}
```
在上面的程式碼中，我們創建了一個名為WelcomeController的控制器類，並使用@Controller註解標記它。然後，我們定義了一個welcome方法，它處理/welcome路徑的GET請求。

在welcome方法中，我們創建了一個Model物件，並通過model.addAttribute方法將名為user的模型屬性添加到模型中。這個user屬性將在Thymeleaf模板中使用。

最後，我們返回了字符串 "welcome"，這是Thymeleaf模板的名稱。Spring Boot將自動查找名為welcome.html的模板文件，並將模型中的數據渲染到模板中。
當使用者訪問/welcome路徑時，控制器將處理請求並渲染welcome.html模板。

3 基本的模板語法

3.1 表達式

Thymeleaf使用表達式來在模板中嵌入動態內容。表達式用於在HTML標籤中引用變數、屬性和方法。以下是一些常見的Thymeleaf表達式示例：

變數引用：${variable}。這允許您在模板中引用變數的值，例如${user.name}會顯示使用者的名字。
屬性引用：*{property}。這用於引用物件的屬性，例如*{book.title}將顯示書的標題。
訊息表達式：#{key}。這用於國際化，根據不同的語言和地區顯示不同的訊息。例如#{welcome.message}。

Thymeleaf使用表達式來訪問和操作模型中的數據。表達式由${}包圍，用於輸出變數的值或執行一些操作。以下是一些常見的Thymeleaf表達式示例：

輸出變數的值：
```
<p>${user.name}</p>
```

調用方法：

<p>今天是：${#dates.format(date, 'dd-MM-yyyy')}</p>

3.2 屬性綁定

Thymeleaf還允許您在HTML標籤屬性中使用表達式來綁定動態數據。這使得在生成HTML時可以根據模型中的數據來動態設置屬性。例如：

<a th:href="@{/profile/${user.id}}">查看個人資料</a>

上述程式碼中，th:href屬性使用Thymeleaf表達式來動態設置鏈接的URL，其中${user.id}表示模型中的使用者ID。

3.3 條件語句和迴圈

Thymeleaf還支持條件語句和迴圈，這些功能使得根據條件顯示或隱藏內容，或者多次重複渲染某個元素成為可能。以下是一些示例：

條件語句：
```
<div th:if="${user.isAdmin}">
    <p>歡迎，管理員！</p>
</div>
```
上述程式碼中，th:if條件語句根據user.isAdmin的值來決定是否渲染<div>元素。
迴圈：
```
<ul>
    <li th:each="item : ${items}">
        <span th:text="${item.name}"></span>
    </li>
</ul>
```
在上述示例中，th:each迴圈遍歷items列表，為每個項目創建一個<li>元素。